<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>em和rem适配</title>
    <style>
      html {
        font-size: 62.5%;
      }

      @media screen and (min-width: 1200px) {
        html {
          font-size: 62.5%;
        }
      }

      @media screen and (max-width: 1200px) {
        html {
          font-size: 30%;
        }
      }

      .outer {
        background-color: paleturquoise;
      }

      .inner {
        width: 20rem;
        height: 20rem;
        background-color: #ccc;
        font-size: 3rem;
      }

      p {
        /* 
          em是一个相对单位,表示以当前元素的直接父元素的字体大小(font-size)为基准的倍率,
          如果直接父元素没有字体大小(font-size),则按照默认字体大小(一般都是16px)来进行倍率计算

          rem(root em)也是一个相对单位,和em不同的时,rem是以页面中html标签的字体大小(font-size)为基准来进行倍率计算
          所有使用rem作为单位的元素都会根据html中font-size的变化而等比变化,所以,移动端适配时,推荐使用rem作为单位
          
          px和rem的转换方式:
          1.自己计算(不推荐)
          2.安装插件自动计算 -- px to rem
              Alt+S  设置html中font-size的默认值
              注意: 
              html中字体大小是多少,这里就要设置为多少!
              一般移动端开发,推荐1rem = 10px, 所以html中font-size的值推荐设置为62.5%

              Alt+Z  互转快捷键

          使用rem相对单位后还需要搭配媒体查询来动态调节html中font-size的值来使得页面等比缩放    
        */
        /* font-size: 2em; */
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">
        <p>这是一段文字</p>
      </div>
    </div>
  </body>
</html>
